<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>单节课体验</title>
		
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index-all.css"/>
		<!-- <script src="js/yjytab.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/tab.css"/>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="con">
			<header class="danjietiyan-header">
				<img src="img/top.png" class="zhuangtailan">
				<p><a href="index-rec.html" class="iconfont icon-left"></a href=""> <span>单节课体验</span> </p>
				<nav class="danjietiyan-nav">
					<ul>
						<li>
							<a href="javascript:;" class="danjiety-main-active">全部</a>
						</li>
						<li>
							<a href="javascript:;" >推荐</a>
						</li>
						
						<li>
							<a href="javascript:;">水彩</a>
						</li>
						<li>
							<a href="javascript:;">素描</a>
						</li>
						<li>
							<a href="javascript:;">彩铅</a>
						</li>
						<li>
							<a href="">国画</a>
						</li>
					</ul>
				</nav>
				<div class="tabs">
						
							<a href="javascript:;" class="active">综合</a>
							<a href="javascript:;">热门</a>
							<a href="javascript:;">新增</a>
						
					</div>
				
			</header>
			<main id="danjiety-main">
				
				<div class="tuijian"">
					
							<div id="tabs-container" class="swiper-container">
								<div class="swiper-wrapper">
									<div class="swiper-slide">
							<div class="main-con">
								
							</div>
							</div>
							<div class="swiper-slide">
							<div class="main-con">
								
							</div>
							</div>
							<div class="swiper-slide">
							<div class="main-con">
								
							</div>
							</div>
						</div>
					</div>	
				</div>
				
				
			</main>
			
		</div>
		<script type="text/javascript">
			window.onload = function() {
				let sjtyList=document.querySelectorAll('.danjietiyan-nav li a')
				
				let token=localStorage.getItem('token')
				for(let i = 0;i<5;i++){
					sjtyList[i].onclick=function(){
						for(let j =0;j<5;j++){
						sjtyList[j].classList.remove('danjiety-main-active')
						
					}
					sjtyList[i].classList.add('danjiety-main-active')
					let boxs=document.querySelectorAll('.main-con')
					console.log(boxs)
					//综合课程列表查询
					let listApi='http://15637237221.wicp.vip/yh/HomePage/comprehensiveVideoCourse.do'
					
					
					axios.post(listApi,{token,typeId:i}).then(function(res){
						console.log(res.data.info)
						let arr = res.data.info
						let html = ''
						for(let i = 0;i<arr.length;i++){
							html+=`
							<a href="detail.html">
							<div class="main-lesson" >
								<div class="main-lesson-wrap"><img src="${arr[i].videoCourseImgUrl}" ></div>
								<div class="main-lesson-text">
									<p>${arr[i].videoCourseName}</p>
										<p class='typeSpan0'><em></em></p>
								
									<p><span>${arr[i].videoInfo}</span>
									<b>${arr[i].watchNumber}人以购</b></p>
								</div>
							
							</div>
							</a>
							
							
							`
						}
						boxs[0].innerHTML=html;
						let typeSpan=document.querySelectorAll('.typeSpan0')
							console.log(typeSpan)
							let spans=''
							for(let k = 0;k<typeSpan.length;k++){
								for(let j = 0;j<arr[k].tagList.length;j++){
									console.log(arr[k].tagList[j])
									spans+=`<em>${arr[k].tagList[j].tagName}</em>`
								}
								typeSpan[k].innerHTML=spans;
								spans=''
							}
					})
					
					
					
					//热门课程列表
						let hostLessonApi='http://15637237221.wicp.vip/yh/HomePage/hottestSingleVideoCourse.do'
						
					
					axios.post(hostLessonApi,{token,typeId:i}).then(function(res){
							console.log(res.data.info)
							let arr = res.data.info
							let html = ''
							for(let i = 0;i<arr.length;i++){
								html+=`
								<a href="detail.html">
								<div class="main-lesson" >
									<div class="main-lesson-wrap"><img src="${arr[i].videoCourseImgUrl}" ></div>
									<div class="main-lesson-text">
										<p>${arr[i].videoCourseName}</p>
										<p class='typeSpan'><em></em></p>
									
										<p><span>${arr[i].videoInfo}</span>
										<b>${arr[i].watchNumber}人以购</b></p>
									</div>
								
								</div>
								</a>
								
								
								`
							}
							boxs[1].innerHTML=html;
						let typeSpan=document.querySelectorAll('.typeSpan')
							console.log(typeSpan)
							let spans=''
							for(let k = 0;k<typeSpan.length;k++){
								for(let j = 0;j<arr[k].tagList.length;j++){
									console.log(arr[k].tagList[j])
									spans+=`<em>${arr[k].tagList[j].tagName}</em>`
								}
								typeSpan[k].innerHTML=spans;
								spans=''
							}
						//
					})	
						
						
						
						
						
					
					//新增课程列表
						let newLessonApi='http://15637237221.wicp.vip/yh/HomePage/latestVideoCourse.do'
					
						//
						axios.post(newLessonApi,{token,typeId:i}).then(function(res){
							console.log(res.data.info)
							let arr = res.data.info
							let html = ''
							for(let i = 0;i<arr.length;i++){
								html+=`
								<a href="detail.html">
								<div class="main-lesson" >
									<div class="main-lesson-wrap"><img src="${arr[i].videoCourseImgUrl}" ></div>
									<div class="main-lesson-text">
										<p>${arr[i].videoCourseName}</p>
										<p class='typeSpan1'><em></em></p>
									
										<p><span>${arr[i].videoInfo}</span>
										<b>${arr[i].watchNumber}人以购</b></p>
									</div>
								
								</div>
								</a>
								
								
								`
							}
							boxs[2].innerHTML=html;
							let typeSpan=document.querySelectorAll('.typeSpan1')
								console.log(typeSpan)
								let spans=''
								for(let k = 0;k<typeSpan.length;k++){
									for(let j = 0;j<arr[k].tagList.length;j++){
										console.log(arr[k].tagList[j])
										spans+=`<em>${arr[k].tagList[j].tagName}</em>`
									}
									typeSpan[k].innerHTML=spans;
									spans=''
								}
						})
						
						
						
						
						
						
					
					
					
					
					var tabsSwiper = new Swiper('#tabs-container', {
						speed: 500,
						on: {
							slideChangeTransitionStart: function() {
								$(".tabs .active").removeClass('active');
								$(".tabs a").eq(this.activeIndex).addClass('active');
							}
						}
					})
					$(".tabs a").on('click', function(e) {
						e.preventDefault()
						$(".tabs .active").removeClass('active')
						$(this).addClass('active')
						tabsSwiper.slideTo($(this).index())
					});
					}
					
				}
				
				
				let boxs=document.querySelectorAll('.main-con')
				console.log(boxs)
				//综合课程列表查询
				let listApi='http://15637237221.wicp.vip/yh/HomePage/comprehensiveVideoCourse.do'
				
				
				axios.post(listApi,{token,typeId:0}).then(function(res){
					console.log(res.data.info)
					let arr = res.data.info
					let html = ''
					for(let i = 0;i<arr.length;i++){
						html+=`
						<a href="detail.html">
						<div class="main-lesson" >
							<div class="main-lesson-wrap"><img src="${arr[i].videoCourseImgUrl}" ></div>
							<div class="main-lesson-text">
								<p>${arr[i].videoCourseName}</p>
								<p class='typeSpan0'><em></em></p>
							
								<p><span>${arr[i].videoInfo}</span>
								<b>${arr[i].watchNumber}人以购</b></p>
							</div>
						
						</div>
						</a>
						
						
						`
					}
					boxs[0].innerHTML=html;
					let typeSpan=document.querySelectorAll('.typeSpan0')
						console.log(typeSpan)
						let spans=''
						for(let k = 0;k<typeSpan.length;k++){
							for(let j = 0;j<arr[k].tagList.length;j++){
								console.log(arr[k].tagList[j])
								spans+=`<em>${arr[k].tagList[j].tagName}</em>`
							}
							typeSpan[k].innerHTML=spans;
							spans=''
						}
				})
				
				
				
				//热门课程列表
					let hostLessonApi='http://15637237221.wicp.vip/yh/HomePage/hottestSingleVideoCourse.do'
					
				
				axios.post(hostLessonApi,{token,typeId:0}).then(function(res){
						console.log(res.data.info)
						let arr = res.data.info
						let html = ''
						for(let i = 0;i<arr.length;i++){
							html+=`
							<a href="detail.html">
							<div class="main-lesson" >
								<div class="main-lesson-wrap"><img src="${arr[i].videoCourseImgUrl}" ></div>
								<div class="main-lesson-text">
									<p>${arr[i].videoCourseName}</p>
									<p class='typeSpan'><em></em></p>
								
									<p><span>${arr[i].videoInfo}</span>
									<b>${arr[i].watchNumber}人以购</b></p>
								</div>
							
							</div>
							</a>
							
							
							`
						}
						boxs[1].innerHTML=html;
						let typeSpan=document.querySelectorAll('.typeSpan')
							console.log(typeSpan)
							let spans=''
							for(let k = 0;k<typeSpan.length;k++){
								for(let j = 0;j<arr[k].tagList.length;j++){
									console.log(arr[k].tagList[j])
									spans+=`<em>${arr[k].tagList[j].tagName}</em>`
								}
								typeSpan[k].innerHTML=spans;
								spans=''
							}
					
					//
				})	
					
					
					
					
					
				
				//新增课程列表
					let newLessonApi='http://15637237221.wicp.vip/yh/HomePage/latestVideoCourse.do'
				
					//
					axios.post(newLessonApi,{token,typeId:0}).then(function(res){
						console.log(res.data.info)
						let arr = res.data.info
						let html = ''
						for(let i = 0;i<arr.length;i++){
							html+=`
							<a href="detail.html">
							<div class="main-lesson" >
								<div class="main-lesson-wrap"><img src="${arr[i].videoCourseImgUrl}" ></div>
								<div class="main-lesson-text">
									<p>${arr[i].videoCourseName}</p>
									<p class='typeSpan1'><em></em></p>
								
									<p><span>${arr[i].videoInfo}</span>
									<b>${arr[i].watchNumber}人以购</b></p>
								</div>
							
							</div>
							</a>
							
							
							`
						}
						boxs[2].innerHTML=html;
						let typeSpan=document.querySelectorAll('.typeSpan1')
							console.log(typeSpan)
							let spans=''
							for(let k = 0;k<typeSpan.length;k++){
								for(let j = 0;j<arr[k].tagList.length;j++){
									console.log(arr[k].tagList[j])
									spans+=`<em>${arr[k].tagList[j].tagName}</em>`
								}
								typeSpan[k].innerHTML=spans;
								spans=''
							}
					})
					
					
					
					
					
					
				
				
				
				
				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())
				});
				
				
				
				
				
				
				
				
			}
		</script>
	</body>
</html>
